<template>
  <view class="app-container">
    <!-- 头部：搜索与导航 -->
    <view class="header">


      <!-- 导航区 -->
      <view class="nav-section">
        <scroll-view scroll-x class="nav-scroll">
          <view
              v-for="nav in navItems"
              :key="nav.id"
              class="nav-item"
              :class="{ 'active': activeNav === nav.id }"
              @click="setActiveNav(nav.id)"
          >
            <image :src="nav.icon" class="nav-icon" mode="aspectFit" />
            <text class="nav-text">{{ nav.title }}</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 豪华轮播区 -->
    <swiper class="luxury-swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="800">
      <swiper-item v-for="(slide, index) in slides" :key="index">
        <view class="swiper-card">
          <image :src="slide.image" class="swiper-image" mode="aspectFill" />
          <view class="slide-content">
            <view class="slide-tag">{{ slide.tag }}</view>
            <view class="slide-title">{{ slide.title }}</view>
            <view class="slide-desc">{{ slide.desc }}</view>
            <view class="action-btn">立即探索</view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 功能区卡片 -->
    <view class="features-section">
      <view class="features-grid">
        <view v-for="(feature, index) in features" :key="index" class="feature-card">
          <image :src="feature.icon" class="feature-icon" mode="aspectFit" />
          <text class="feature-title">{{ feature.title }}</text>
        </view>
      </view>
    </view>

    <!-- 精选推荐区 -->
    <view class="premium-section">
      <view class="section-header">
        <view class="section-title">
          <text class="title-decor">❖</text>
          精品推荐
          <text class="title-decor">❖</text>
        </view>
        <text class="see-all" @click="goToBuy">查看更多</text>
      </view>

      <view class="products-grid">
        <view
            v-for="(product, index) in premiumProducts"
            :key="index"
            class="product-card"
            @click="navigateToDetail(product.id)"
        >

        <view class="product-badge">新品</view>
          <image :src="product.image" class="product-image" mode="aspectFill" />
          <view class="product-info">
            <view class="product-title">{{ product.title }}</view>
            <view class="product-desc">{{ product.desc }}</view>
            <view class="product-footer">
              <view class="pricing">
                <text class="price">¥{{ product.price }}</text>
                <text class="original-price">¥{{ product.originalPrice }}</text>
              </view>
              <view class="action-icon">
                <uni-icons type="plus" size="24" color="#FF6E7F" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 高端品牌区 -->
    <view class="luxury-brands">
      <view class="section-header">
        <view class="section-title">高端甄选</view>
      </view>

      <view class="brands-showcase">
        <scroll-view scroll-x class="brands-scroll">
          <view class="brand-group" v-for="(group, index) in brandGroups" :key="index">
            <view class="brand-item" v-for="(brand, bIndex) in group" :key="bIndex">
              <view class="brand-badge">高端</view>
              <image :src="brand.image" class="brand-image" mode="aspectFit" />
              <text class="brand-name">{{ brand.name }}</text>
              <text class="brand-desc">{{ brand.desc }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- VIP专属区 -->
    <view class="vip-section"  @click="navigateToVip">
      <image src="https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=" class="vip-bg" mode="aspectFill" />
      <view class="vip-content">
        <view class="vip-header">
          <text class="vip-title">DIANA VIP</text>
          <text class="vip-subtitle">专享尊贵特权</text>
        </view>
        <view class="vip-features">
          <view class="feature-item">
            <uni-icons type="star" size="20" color="#FFD700" />
            <text>精选商品95折</text>
          </view>
          <view class="feature-item">
            <uni-icons type="star" size="20" color="#FFD700" />
            <text>会员专享活动</text>
          </view>
          <view class="feature-item">
            <uni-icons type="star" size="20" color="#FFD700" />
            <text>专属客服通道</text>
          </view>
        </view>
        <view class="vip-cta">立即加入</view>
      </view>
    </view>

    <!-- 底部特色推荐 -->
    <view class="featured-products">
      <view class="section-header">
        <view class="section-title">特色精选</view>
      </view>

      <view class="featured-grid">
        <view v-for="(product, index) in featuredProducts" :key="index" class="featured-item"   @click="navigateToDetail(product)">
          <image :src="product.image" class="featured-image" mode="aspectFill" />
          <view class="product-info">
            <view class="product-title">{{ product.title }}</view>
            <view class="product-price">¥{{ product.price }}</view>
          </view>
          <view class="product-actions">
            <uni-icons type="heart" size="18" color="#999" />
            <uni-icons type="cart" size="18" color="#999" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 当前活动导航
const activeNav = ref('recommend');

// 导航项配置
const navItems = ref([
  {
    id: 'recommend',
    title: '推荐',
    icon: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk='
  },
  {
    id: 'vip',
    title: '大王卡',
    icon: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk='
  },
  {
    id: 'course',
    title: '课程',
    icon: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk='
  },
  {
    id: 'new',
    title: '新品',
    icon: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk='
  }
]);
const navigateToDetail = (productId) => {
  uni.navigateTo({
    url: `/pages/goods/detail?productId=${productId}`
  });
};
const goToBuy=()=>{
  uni.navigateTo({
    url: `/pages/buyPage/buyPage`
  });
}
// 轮播图数据
const slides = ref([
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    tag: '新品上市',
    title: '自然美睫艺术',
    desc: '打造精致眼妆 展现魅力光彩'
  },
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    tag: '限时特惠',
    title: '专业工具套装',
    desc: '全套解决方案 轻松提升技艺'
  },
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    tag: '精品教程',
    title: '大师级美睫课程',
    desc: '从入门到精通 提升专业技能'
  }
]);

// 功能区数据
const features = ref([
  {
    icon: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '全场免邮'
  },
  {
    icon: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '7天退换'
  },
  {
    icon: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '正品保证'
  },
  {
    icon: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '新品特惠'
  }
]);

// 高端产品数据
const premiumProducts = ref([
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '山茶花系列睫毛',
    desc: '0.05圆毛/多根/开花 适用于各种技术',
    price: '58.00',
    originalPrice: '78.00'
  },
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '速干王胶水',
    desc: '1秒快干 牢固70天 无刺激气味',
    price: '128.00',
    originalPrice: '148.00'
  },
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '黛毛上妆液',
    desc: '高效补水锁湿 打造精致妆容',
    price: '98.00',
    originalPrice: '128.00'
  },
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '温和卸妆液',
    desc: '快速清洁 不伤肤质 适合敏感肌',
    price: '78.00',
    originalPrice: '108.00'
  }
]);

// 高端品牌数据
const brandGroups = ref([
  [
    {
      image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
      name: '迪漾DIANA',
      desc: '眼部美容专家'
    },
    {
      image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
      name: '花恋',
      desc: '睫毛精研品牌'
    }
  ],
  [
    {
      image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
      name: '媚眼精灵',
      desc: '假睫毛制造者'
    },
    {
      image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
      name: '美睫科技',
      desc: '专业工具供应商'
    }
  ]
]);

// 特色产品数据
const featuredProducts = ref([
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '镊子清洁液',
    price: '36.00'
  },
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '化妆棉2000片',
    price: '25.00'
  },
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '剪胶器',
    price: '45.00'
  },
  {
    image: 'https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=',
    title: '美容头巾',
    price: '32.00'
  }
]);

// 设置活动导航
const setActiveNav = (navId) => {
  activeNav.value = navId;

  if (navId === 'vip') {
    uni.navigateTo({ url: '/pages/vip/vip' });
  } else if (navId === 'course') {
    uni.navigateTo({ url: '/pages/course/course' });
  } else if (navId === 'recommend' || navId === 'new') {
    uni.navigateTo({ url: '/pages/buyPage/buyPage' }); // 新增
  }
};
const navigateToVip = () => {
  uni.navigateTo({
    url: '/pages/vip/vip'
  });
};

</script>

<style lang="scss">
/* 高端电商设计系统 */
:root {
  --primary: #5C6BC0;
  --primary-light: #8C9EFF;
  --primary-dark: #26418F;
  --accent: #FF6E7F;
  --accent-light: #FF9FAF;
  --accent-dark: #C93E50;
  --gold: #D4AF37;
  --text-primary: #2A2A48;
  --text-secondary: #6C6C9B;
  --text-light: #A7A7C9;
  --surface: #FFFFFF;
  --surface-dark: #F5F5FF;
  --divider: #E3E3F5;
  --shadow-sm: 0 4px 12px rgba(92, 107, 192, 0.08);
  --shadow-md: 0 8px 24px rgba(92, 107, 192, 0.15);
  --shadow-lg: 0 12px 36px rgba(92, 107, 192, 0.2);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--surface-dark);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 头部区域 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(125deg, #ffffff, #f8f9ff);
  box-shadow: var(--shadow-sm);
  padding: 16rpx 20rpx 0;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
}

.search-box {
  padding: 0 20rpx 20rpx;
}

.search-content {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border-radius: 999rpx;
  box-shadow: var(--shadow-sm);
  padding: 16rpx 32rpx;
  height: 80rpx;
  transition: var(--transition);
}

.search-content:focus-within {
  box-shadow: var(--shadow-md);
}

.search-icon {
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: var(--text-primary);
  border: none;
  background: none;
  outline: none;
}

.placeholder {
  color: var(--text-light);
}

.mic-icon {
  width: 64rpx;
  height: 64rpx;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* 导航区 */
.nav-section {
  height: 160rpx;
}

.nav-scroll {
  white-space: nowrap;
  padding: 24rpx 0;
  height: 100%;
  margin: 0 -16rpx; // 增加左右负边距，使 nav-items 更紧凑
}

.nav-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 28rpx;
  width: 120rpx;
  cursor: pointer;
  transition: var(--transition);
  position: relative;

  &.active {
    .nav-icon {
      transform: scale(1.1);
      box-shadow: var(--shadow-sm);
      filter: drop-shadow(0 4rpx 12rpx rgba(92, 107, 192, 0.2));
    }

    .nav-text {
      color: var(--accent);
      font-weight: bold;


    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: linear-gradient(90deg, var(--accent), var(--accent-light));
      border-radius: 4rpx;
    }
  }
}

.nav-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-bottom: 16rpx;
  background: var(--surface);
  padding: 16rpx;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.nav-text {
  font-size: 24rpx;
  color: var(--text-secondary);
  transition: var(--transition);
 margin-top: -29rpx;
}

/* 豪华轮播区 */
.luxury-swiper {
  height: 360rpx;
  margin: 24rpx 20rpx;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.swiper-card {
  position: relative;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32rpx 36rpx;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

.slide-tag {
  background: var(--accent);
  display: inline-block;
  padding: 8rpx 24rpx;
  border-radius: 24rpx;
  font-size: 22rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.slide-title {
  font-size: 36rpx;
  font-weight: 700;
  letter-spacing: 1rpx;
  margin-bottom: 8rpx;
}

.slide-desc {
  font-size: 26rpx;
  opacity: 0.9;
  margin-bottom: 24rpx;
}

.action-btn {
  background: var(--primary);
  color: white;
  width: 180rpx;
  padding: 16rpx;
  text-align: center;
  border-radius: 36rpx;
  font-size: 26rpx;
  font-weight: 600;
  letter-spacing: 1rpx;
  box-shadow: 0 6rpx 18rpx rgba(92, 107, 192, 0.3);
  transition: var(--transition);

  &:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 12rpx rgba(92, 107, 192, 0.2);
  }
}

/* 功能区 */
.features-section {
  margin: 36rpx 20rpx;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.feature-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 24rpx 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);

  &:active {
    transform: translateY(-6rpx);
    box-shadow: var(--shadow-md);
  }
}

.feature-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 16rpx;
}

.feature-title {
  font-size: 24rpx;
  color: var(--text-secondary);
}

/* 精品推荐区 */
.premium-section {
  margin: 0 20rpx 40rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: 700;
  color: var(--text-primary);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6rpx;
    height: 4rpx;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2rpx;
  }
}

.title-decor {
  color: var(--accent);
  margin: 0 12rpx;
}

.see-all {
  font-size: 28rpx;
  color: var(--text-secondary);
  position: relative;

  &::after {
    content: '〉';
    margin-left: 6rpx;
  }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.product-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: var(--transition);

  &:active {
    transform: translateY(-8rpx);
    box-shadow: var(--shadow-lg);
  }
}

.product-badge {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  background: linear-gradient(90deg, #FF6E7F, #FF9FAF);
  color: white;
  padding: 8rpx 24rpx;
  border-radius: 24rpx;
  font-size: 22rpx;
  font-weight: 600;
  z-index: 2;
}

.product-image {
  width: 100%;
  height: 280rpx;
}

.product-info {
  padding: 24rpx;
}

.product-title {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 12rpx;
}

.product-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
  margin-bottom: 20rpx;
  height: 66rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pricing {
  display: flex;
  flex-direction: column;
}

.price {
  font-size: 32rpx;
  font-weight: 700;
  color: var(--accent);
}

.original-price {
  font-size: 24rpx;
  color: var(--text-light);
  text-decoration: line-through;
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 110, 127, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);

  &:active {
    background: rgba(255, 110, 127, 0.2);
    transform: scale(1.1);
  }
}

/* 高端品牌区 */
.luxury-brands {
  margin: 0 20rpx 40rpx;
}

.brands-showcase {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24rpx;
  box-shadow: var(--shadow-md);
}

.brands-scroll {
  white-space: nowrap;
}

.brand-group {
  display: inline-flex;
  gap: 32rpx;
  padding: 0 24rpx;
  vertical-align: top;

  &:last-child {
    padding-right: 48rpx;
  }
}

.brand-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 280rpx;
  position: relative; // 必须设置为相对定位容器
  padding-top: 24rpx; // 给 badge 留出空间
}

.brand-badge {
  position: absolute;
  top: 32rpx; // 向下移动了！原来是 -16rpx，现在设为正值
  right: 20rpx;
  background: linear-gradient(135deg, #D4AF37, #F5D020);
  color: #ffffff;
  font-size: 22rpx;
  padding: 6rpx 18rpx;
  border-radius: 16rpx;
  z-index: 2;
  font-weight: 600;
}


.brand-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background: #ffffff;
  margin-bottom: 24rpx;
  border: 4rpx solid #f0f0ff;
  box-shadow: var(--shadow-sm);
}

.brand-name {
  font-size: 28rpx;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8rpx;
}

.brand-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
}

/* VIP专属区 */
.vip-section {
  height: 280rpx;
  margin: 0 20rpx 40rpx;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
}

.vip-bg {
  width: 100%;
  height: 100%;
}

.vip-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vip-header {
  margin-bottom: 32rpx;
}

.vip-title {
  display: block;
  font-size: 48rpx;
  font-weight: 800;
  color: white;
  letter-spacing: 2rpx;
  margin-bottom: 12rpx;
  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.vip-subtitle {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1rpx;
}

.vip-features {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  font-size: 26rpx;
  color: white;
  font-weight: 500;
}

.vip-cta {
  align-self: flex-end;
  background: linear-gradient(90deg, #FFD700, #D4AF37);
  padding: 16rpx 48rpx;
  border-radius: 48rpx;
  font-size: 28rpx;
  font-weight: 700;
  color: #333333;
  margin-top: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(212, 175, 55, 0.4);
  transition: var(--transition);

  &:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(212, 175, 55, 0.3);
  }
}

/* 特色推荐 */
.featured-products {
  margin: 0 20rpx;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
}

.featured-item {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: var(--transition);

  &:active {
    transform: translateY(-4rpx);
    box-shadow: var(--shadow-md);
  }
}

.featured-image {
  width: 100%;
  height: 160rpx;
}

.product-info {
  padding: 20rpx;
}

.product-title {
  font-size: 24rpx;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  font-size: 26rpx;
  color: var(--accent);
  font-weight: 600;
}

.product-actions {
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx 16rpx;
  margin-top: auto;

  .uni-icons {
    transition: var(--transition);

    &:active {
      transform: scale(1.2);
    }
  }
}
.vip-section {
  height: 280rpx;
  margin: 0 20rpx 40rpx;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
}

.vip-bg {
  width: 100%;
  height: 100%;
}

.vip-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vip-header {
  margin-bottom: 32rpx;
}

.vip-title {
  display: block;
  font-size: 48rpx;
  font-weight: 800;
  color: white;
  letter-spacing: 2rpx;
  margin-bottom: 12rpx;
  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.vip-subtitle {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1rpx;
}

.vip-features {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  font-size: 26rpx;
  color: white;
  font-weight: 500;
}

.vip-cta {
  align-self: flex-end;
  background: linear-gradient(90deg, #FFD700, #D4AF37);
  padding: 16rpx 48rpx;
  border-radius: 48rpx;
  font-size: 28rpx;
  font-weight: 700;
  color: #333333;
  margin-top: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(212, 175, 55, 0.4);
  transition: all 0.3s ease-in-out;
}

.vip-cta:active {
  transform: scale(0.95);
}

</style>